<template>
	<el-collapse accordion>
		<el-collapse-item>
			<template slot="title">
				门店
			</template>

			<div class="shop-list-wrap" v-if="list.length">
				<div
					class="shop-list "
					v-for="(item, index) in list"
					:key="index"
					:class="{ active: selId == item.dept_id, close: item.bus_state == 2 }"
					@click="changeShop(item, index)"
				>
					<div class="shop-list_left">
						<div class="left-name">{{ item.dept_name }}</div>
						<div class="left-data">
							<span>客单(上周):</span>
							<span class="left-data_num font-bold font-18">{{
								item.unit_price_new
							}}</span>
						</div>
					</div>
					<div class="shop-list_right">
						<div class="font-bold font-14">{{ item.left_cart }}</div>
						<div>可约</div>
					</div>
				</div>
			</div>
		</el-collapse-item>
	</el-collapse>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		},
		selId: {
			type: [String, Number],
			default: ""
		},
		isRefresh: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			activeType: 0
		};
	},
	watch: {
		list: {
			deep: true,
			immediate: true,
			handler(v) {
				if (v.length > 0 && this.isRefresh) {
					this.changeShop(v[0], 0);
				}
			}
		}
	},
	mounted() {},
	methods: {
		changeShop(item, index) {
			if (item.bus_state == 2) {
				this.$message.warning(item.dept_name + "处于闭店");
				return false;
			}
			if (item.dept_id === this.selId) return false;
			console.info("item", item);
			this.$emit("update:selId", item.dept_id);
			this.$emit("confirm");
		}
	}
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 769px) {
	.col-leftRow {
		height: 100%;
	}
}
.shop-list-wrap {
	&::-webkit-scrollbar {
		display: none;
	}
}
.shop-list-wrap {
	width: 100%;
	display: flex;
	align-items: center;
	// flex-wrap: wrap;
	flex-direction: column;
	padding: 10px 0;
	margin-bottom: 10px;
	overflow-x: auto;
	max-height: 280px;
	.shop-list {
		width: 99%;
		display: flex;
		align-items: center;
		height: 60px;
		border: 1px solid #aaa;
		border-radius: 6px;
		text-align: center;
		font-size: 12px;
		margin-bottom: 10px;
		cursor: pointer;
		&.active {
			color: $primary;
			background-color: #f3e9ff;
			border: 0.6px solid $primary;
			&_right {
				border-left: 1px solid $primary;
			}
		}
		&.close {
			background-color: #ccc;
		}
		&:first-child {
			margin-left: 0;
		}
		&_left {
			flex: 4;
			text-align: left;
			padding: 0 10px;
			.left-name {
				margin-bottom: 2px;
			}
			.left-data {
				&_num {
					margin-left: 4px;
				}
			}
		}
		&_right {
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-left: 1px solid #aaa;
			padding: 0 10px;
		}
	}
	// .shop_active {
	// 		color: $primary;
	// 		background-color: #f3e9ff;
	// 		border: 0.6px solid $primary;
	// 		&_right {
	// 			border-left: 1px solid $primary;
	// 		}
	// }
}
</style>
